@charset "utf-8";
@import "function";
*{
  margin: 0;padding: 0;list-style: none;font-family: "微软雅黑", adelle-sans;
  //font-size: 40px;
}
img{
  border: none;display: block;
}
a{
  text-decoration: none;
}
input, select {
  vertical-align:middle;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*以上为样式重置*/
.z-body{
  background: #f3f3f3;width:16rem;margin:0 auto;overflow: hidden;
  padding-bottom: 4.5rem;
}
header{
  width:100%;height:15.45rem;margin-bottom: .55rem;position: relative;
  @include background('../images/header.jpg');
}
#map{
  width:100%;height:15.45rem;transform: scale(.8);
}
.hea-content{
  width:6.5rem;position: absolute;left:0;top:1rem;
  p{
    width:100%;height:1.4rem;margin:0 0 .6rem 0;
    @include center(.5rem,#fff,1.4rem,left);text-indent: .6rem;
    border-radius: 0 .7rem .7rem 0;
    &:nth-child(odd){
      background: #53483d;
    }
    &:nth-child(even){
      background: #b9503e;
    }
  }
}
.section{
  position: absolute;left:0;right:0;bottom:1rem;overflow: hidden;margin:auto;
  width:7.5rem;height:1.4rem;background: #fff;border-radius: .6rem;
  form{
    width:100%;height:100%;border-radius: .6rem;
    &:before{
      content:"";display: block;width:0.675rem;height:0.675rem;
      @include background('../images/chaxun.png');position: absolute;
      left:.3rem;top:.38rem;
    }
    input{
      display: block;width:100%;height:100%;text-indent: 1.2rem;
      position: relative;@include center(.55rem,#c3c3c3,1.4rem,left);
      border:none;outline: none;border-radius: .6rem;background: none;
    }
  }
}




/*content*/
$font:#3d3d3d;$hui:#c3c3c3;
.content{
  @include warp(100%,auto,.55rem,.55rem);background: #fff;
}
.con-top{
  width:90%;margin:.5rem;overflow: hidden;
  li{
    float: left;margin-right: .3rem;
    img{width:1.2rem;height:1.2rem;}
  }
  li:nth-child(1){padding-left: .3rem;}
  li:nth-child(2){
    width:1.65rem;height:.95rem;border:1px solid #ffb910;color: #ffb910;
    line-height: .95rem;text-align: center;font-size: .55rem;
    border-radius: .2rem;margin: .1rem .4rem 0 0;
  }
  li:nth-child(3){
    height:.95rem;
    @include center(.6rem,$font,1.2rem);
  }
}
.con-center{
  width:100%;height:9.85rem;position: relative;overflow: hidden;
  a{
    display: block;width:100%;height:100%;
    img{
      width:100%;height:100%;
    }
  }
  p{
    position: absolute;left:.5rem;top:.5rem;width:3rem;height:1.1rem;
    @include center(.5rem,#4d4d4d,1.1rem);background: rgba(156,155,154,.7);
    border-radius: .5rem;
  }
  span{
    display: block;position: absolute;right:-1.2rem;top:-.3rem;width:3rem;height:1.5rem;
    line-height: 2.1rem;background: #f23921;color:#fff;text-align: center;
    font-size: .5rem;transform: rotate(45deg);
  }
}
.con-bottom{
  @include warp(100%,auto,.3rem,.3rem);border-bottom: 1px solid #e7e7e7;
  dl{
    width:90%;margin:0 auto;overflow: hidden;
    dt{
      @include center(.5rem,$font,.6rem,left);
    }
    dd{
      @include center(.4rem,$hui,1.2rem,left);
    }
    div{
      @include warp(100%,auto,0,.4rem);
      .lefts{
        float: left;line-height: .6rem;
        span{
          font-size: .5rem;color:$font;position: relative;padding-left: .8rem;
          &:before{
            content:"";width:.675rem;height: .475rem;position: absolute;left:0;top:.1rem;
            @include background('../images/yan.png');
          }
        }
      }
      .rights{
        float: right;line-height: .6rem;overflow: hidden;
        span{
          font-size: .5rem;color:$font;padding-left: 1.5rem;position: relative;
        }
        span:first-child{
          &:before{
            content:"";width:.55rem;height: .55rem;position: absolute;left:.8rem;top:.05rem;
            @include background('../images/dianzan.png');
          }
        }
        span:last-child{
          &:before{
            content:"";width:.525rem;height: .475rem;position: absolute;left:.8rem;top:.1rem;
            @include background('../images/pinglun.png');
          }
        }
      }
    }
  }
}
.con-foo{
  @include warp(100%,auto,.3rem,.3rem);
}
.con-foo-dl{
  @include warp(90%,auto);
  dt{
    float: left;width:1.5rem;overflow: hidden;
    div{
      width:100%;height:1.25rem;border-right: 1px solid #e7e7e7;box-sizing: border-box;
      img{width:1.25rem;height:100%;border-radius: 50%;}
    }
    p{
      width:100%;@include center(.45rem,$font,.6rem,left);white-space: nowrap;text-indent: .2rem;
    }
  }
  dd{
    float: left;@include center(.5rem,$font,.6rem,left);width:calc(100% - 2rem);
    margin:.1rem 0 0 .5rem;letter-spacing: 1px;
  }
}
/*scroll*/
.scroll-box{
  @include warp(100%,3.8rem,.5rem,0);background: #fff;overflow: scroll;
}
.scroll-inset{
  @include warp(auto,2.6rem,.5rem);
  li{
    float:left;width:4.8rem;height:2.575rem;margin-right: .3rem;
    @include background('../images/listlv.png');
    div{
      overflow: hidden;position: relative;text-align: center;
      font-size: 0;color:#fff;height:52%;
      strong{
        font-size: 1.3rem;vertical-align: top;line-height: 1.6rem;
      }
      b{
        font-size: .6rem;vertical-align: top;line-height: 1.9rem;
        padding-left: .2rem;
      }
      span{
        font-size: .6rem;position: absolute;font-weight: bold;
        left:2.1rem;top:0;
      }
    }
    p{
      @include center(.4rem,#fff,.6rem);width:100%;
    }
    a{
      display: block;@include warp(2.55rem,.5rem,0);
      background: #fff;
      @include center(.4rem,#3e9b4b,.5rem);
    }
  }
  li:first-child{margin-left: .3rem;}
  li:nth-child(even){@include background('../images/listhui.png');}
}
/*list秒杀*/
.list-title{
  @include warp(100%,2rem);
  @include center(.6rem,#333,2rem);
  letter-spacing: .05rem;
}
.list{
  @include warp(100%,auto);background: #fff;
  .list-box{
    @include warp(100%,auto);border-bottom: 1px solid #f7f7f7;
  }
}
.list-box-top{
  @include warp(100%,7.45rem,.55rem);position: relative;
  & > a{
    display: block;width:100%;height:100%;
    img{
      width:100%;height:100%;
    }
  }
  .list-position{
    position: absolute;left:0;top:0;background: rgba(0,0,0,0.6);
    width:100%;height:100%;overflow: hidden;
    .time{
      @include warp(4.95rem,1.15rem,2rem,.5rem);padding: 0 .1rem;
      background: rgba(193,193,193,.5);border-radius: .2rem;
      @include center(.5rem,#181818,1.15rem);
      span{
        font-size: .5rem;background: #fea801;
      }
    }
    p{
      @include warp(100%,auto);
      @include center(.55rem,#fff,1rem);
    }
    .time-next{
      @include warp(100%,auto);text-align: center;
      span:nth-child(1){
        color:#ffb400;font-size: .55rem;padding-right: .5rem;
        vertical-align: top;line-height: 1rem;
      }
      span:nth-child(2){
        color:#73b53c;font-size: .3rem;
        border:1px solid #73b53c;padding: .06rem .2rem;
        border-radius: .1rem;
        vertical-align: top;line-height: 1rem;
      }
    }
  }
}
.list-box-bot{
  @include warp(100%,auto);
  dl{
    @include warp(93%,auto,.3rem,.4rem);
    dt{
      @include center(.55rem,$font,.7rem,left);
      float: left;width:calc(100% - 1.7rem);
    }
    dd{
      float: right;width:1.15rem;height:1.175rem;
      img{
        width:100%;height:100%;
      }
    }
  }
}
/*商品*/
.goods-box{
  @include warp(100%,auto,.55rem);background: #fff;
}
.goods{
  @include warp(14.85rem,auto,.7rem,.7rem);
}
.g-top{
  @include warp(100%,4.3rem);padding-bottom: .4rem;border-bottom: .05rem solid #f9f9f9;
  & > a{
    display: block;width:6.45rem;height:100%;float: left;
    img{width:100%;height:100%;}
  }
  dl{
    width:7.5rem;overflow: hidden;float: right;
    dt{
      @include center(.55rem,$font,.7rem,left);padding-bottom: .1rem;
    }
    dd{
      color: #fff;line-height: .6rem;
      span{
        display: inline-block;margin-right: .2rem;background: #73b53c;
        font-size: .45rem;padding: .05rem .2rem;border-radius: .1rem;
      }
    }
    p{
      color: $hui;line-height: .6rem;
      span{
        padding-right: .4rem;font-size: .45rem;
        &:nth-child(1){
          border-right: 1px solid $hui;
        }
        &:nth-child(2){
          padding-left: 0;
        }
      }
    }
    div{
      @include center(.6rem,#ffb400,.8rem,left);padding-top: .3rem;
    }
  }
}
.g-bottom{
  @include warp(100%,auto,.2rem);
    p{
      @include center(.5rem,$font,.7rem,left);
      float: left;width:calc(100% - 1.7rem);
    }
    img{
      width:1.15rem;height:1.175rem;float: right;
    }
}
/*图片列表*/
.foo-image{
  @include warp(100%,auto);
}
.image1{
  @include warp(100%,auto,.55rem);padding: .6rem 0;background: #fff;
  a{
    display: block;@include warp(15.15rem,6.55rem);
    img{width:100%;height:100%;}
  }
}
.image2{
  @include warp(100%,auto,.55rem);padding: .6rem 0;background: #fff;
  a{
    display: block;margin-left: .3rem;
    width:7.6rem;height:5.2rem;float: left;
    img{width:100%;height:100%;}
  }
}
/*nav*/
.nav-box{
  width:16rem;height:4.15rem;position: fixed;left:0;bottom:0;right:0;margin: auto;
  z-index: 99;background: #fff;border-top: .05rem solid $hui;
  &>p{
    @include center(.5rem,$font,.8rem);
  }
}
.nav{
  position: absolute;left:0;bottom:0;width:100%;height:2rem;
  @include background('../images/tuoyuan.png');
  li{
    float: left;width:33.33%;
    div{
      margin:-.6rem auto 0;width:1.75rem;height:1.75rem;border-radius: 50%;
      overflow: hidden;position: relative;
      background: rgba(255,255,255,.6);
      img{
        width:1.15rem;height:1.15rem;@include absolute();
      }
    }
    p{
      @include center(.5rem,$font,.8rem);
    }
  }
  li:nth-child(2) div{
    margin-top: -.9rem;
    &+p{
      margin-top: .3rem;
    }
  }
  .nav-active{
    div{
      background: rgba(205,228,105,.4);
    }
    p{
      color:#85be59;
    }
  }
}
.nav-fixed{
  position: absolute;right:.4rem;top:-.8rem;width:2rem;height:2rem;
  img{
    width:100%;height:100%;
  }
}
/*swiper轮播*/
.banner{
  @include warp(100%,9.65rem,.55rem);padding-top: .7rem;background: #fff;
}
.banner-swiper{
  width:100%;height:100%;
  a{
    width:100%;height:100%;display: block;
    img{
      width:100%;height:100%;
    }
  }
}






















